<template>
  <div class="note">
    <div class="tagarr">
      <el-tag type="success" v-for="(item) in tagarr" :key='item' effect='plain' closable @close='select(item)'>{{item}}</el-tag>
      <el-tag type="primary" class="all" @click='select("all")'>全部</el-tag>
    </div>
    <div class="con">
      <div
        class="think"
        v-for="(note, index) in notes"
        :key="note.id"
        @mouseover="mover(index)"
        @mouseout="mout"
      >
        <img :src="note.img" alt="" />
        <div class="text">{{ note.text }}</div>
        <el-tag class="tag tagType">{{ note.tags }}</el-tag>
        <div v-show="tagnum === index" style="margin-top:-2px;">
          <el-tag class="tag tagCopy" type="warning" @click="copyItem(note.text)">复制</el-tag>
          <i class="el-icon-close del" @click="del(note.id)"></i>
        </div>
        
      </div>
    </div>
    <div class="addNote">
      <el-row :gutter="10">
        <el-col :span="13">
          <el-input
            placeholder="记忆的伤口总在回忆时流血"
            v-model="input"
            clearable
            prefix-icon="el-icon-edit"
          ></el-input>
        </el-col>
        <el-col :span="2">
          <el-input
            placeholder="殊途同归"
            v-model="inputTag"
            clearable
            prefix-icon="el-icon-edit"
          ></el-input>
        </el-col>
        <el-col :span="2">
          <el-button type="primary" @click="parse" plain>粘贴</el-button>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" style="font-szie: 28px" @click="addNote"
            >心若思 笔随影</el-button>
        </el-col>
        <el-col :span="1"></el-col>
      </el-row>
    </div>
    <siderdoc />
  </div>
</template>

<script lang='ts'>
import {
  defineComponent,
  getCurrentInstance,
  onMounted,
  reactive,
  ref,
  toRefs,
  watch,
} from "vue";
import siderdoc from "../doc.vue";
import copy from '../../utils/copy'
export default defineComponent({
  components: { siderdoc },
  setup() {
    //@ts-ignore
    let { ctx } = getCurrentInstance();
    onMounted(() => {
      getNote();
    });
    let input = ref("");
    let inputTag = ref("");
    let noteArr = reactive({
      notes: [],
      noteAll:[]
    });
    let tagarr=ref<string[]>([])
    interface notes {
      id: string;
      img: string;
      text: string;
      tags: string;
    }
    let getNote = async () => {
      let res = await ctx.$axios.get("/note");
      res.data.forEach((item:notes)=>{
        if(!tagarr.value.includes(item.tags)){
          tagarr.value.push(item.tags)
        }
      })
      noteArr.notes = res.data;
      noteArr.noteAll = res.data;
    };
    let addNote = async () => {
      if (!input.value) {
        ctx.$message.warning("请填写摘抄句");
        return;
      }
      if (!inputTag.value) {
        ctx.$message.warning("请填写标签");
        return;
      }

      let id =
        noteArr.notes.length + 1 > 10
          ? noteArr.notes.length + 1
          : "0" + (noteArr.notes.length + 1);
      let newNote: notes = {
        id: "n" + id,
        img: "",
        text: input.value,
        tags: inputTag.value,
      };
      let res = await ctx.$axios.post("/addnote", newNote);
      if (res.status === 200) {
        ctx.$message.success("添加成功");
        input.value = "";
        inputTag.value = "";
        getNote();
      }
    };
    let del = (id: string) => {
      ctx
        .$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
        .then(async () => {
          let res = await ctx.$axios.post("/delnote", { id });
          if (res.status == 200) {
            ctx.$message({
              type: "success",
              message: "删除成功!",
            });
            getNote();
          }
        })
        .catch(() => {
          ctx.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    };
    let tagnum = ref(999);
    let mover = (index: number) => {
      tagnum.value = index;
    };
    let mout = () => {
      tagnum.value = 999;
    };

    let select=(type:string)=>{
      if(type=='all'){
        noteArr.notes=noteArr.noteAll
      }else{
        
       noteArr.notes= noteArr.notes.filter((item:notes)=>{
          return item.tags!==type
        })
       tagarr.value.splice(tagarr.value.indexOf(type),1) 
      }
    }
    watch(()=>noteArr.notes,(arr)=>{
      arr.forEach((item:notes)=>{
         if(!tagarr.value.includes(item.tags)){
          tagarr.value.push(item.tags)
        }
      })
      
    })

    let copyItem=(text:string)=>{
      let res= copy(text)
      if(res){
        ctx.$message.success("复制成功")
      }else{
        ctx.$message.warning("请确认复制是否被禁止")
      }
    }

    let parse=async()=>{
     let text=await navigator.clipboard.readText()
     input.value=text
    }
    return {
      input,
      inputTag,
      addNote,
      ...toRefs(noteArr),
      mover,
      mout,
      tagnum,
      del,
      tagarr,
      select,
      copyItem,
      parse
    };
  },
});
</script>

<style lang="less" scoped>
.note {
  position: relative;
  //  width: 100%;
  height: 660px;
  // overflow-y: scroll;
  padding: 5px 10px 100px 10px;
  box-sizing: border-box;
  background-image: -webkit-cross-fade(
    url("../../assets/img/rs.png"),
    url("../../assets/noteIcon/i5.jpg"),
    50%
  );
  background-color: rgba(1, 1, 8, 1);
  background-repeat: no-repeat;
  background-size: 500px 600px;
  background-position: 530px 0;
  background-attachment: fixed;
  .tagarr{
    position: absolute;
    top: 0;
    left: 10%;
    width: 80%;
    height: 10px;
    line-height: 42px;
    padding: 0 20px;
    margin: -8px auto;
    border: 1px solid skyblue;
    border-radius: 5px;
    overflow: hidden;
    transition: 1s;
    background: rgba(6, 231, 231, 0.4);
    &:hover{
      height: 42px;
    }
  }
  .con {
    display: flex;
    flex-wrap: wrap;
    .think {
      display: flex;
      height: 40px;
      line-height: 40px;
      margin: 10px 0 0 10px;
      font-size: 22px;
      background-color: rgba(114, 186, 214, 0.4);
      font-family: "楷体";
      border: 1px solid rgb(229, 235, 149);
      border-radius: 5px;

      transition: 0.5s;
      &:hover {
        color: yellow;
        box-shadow: 2px 2px 2px 2px rgb(48, 48, 49);
      }
      img {
        display: block;
        margin: 3px 0 3px 5px;
        width: 34px;
        height: 34px;
        border-radius: 50%;
      }

      .tag{
        width: 36px;
        font-size: 16px;
        padding: 0;
        text-align: center;
        margin: 4px 5px 7px 5px;
      }
      .tagType{
        background-color: rgba(161, 168, 216, 0.4);
        color: rgb(218, 240, 22);
        &:hover{
          color:cyan;
        }
        
      }
      .tagCopy{
        &:hover {
          color: rgb(240, 17, 17);
        }
      }
      .del {
        height: 30px;
        line-height: 30px;
        margin: 5px 5px 5px 0;
        padding: 0;
        color: aquamarine;
        transition: 1s;
        &:hover {
          color: red;
          transform-origin: 50%;
          transform: rotate(180deg);
        }
      }
    }
  }
  .addNote {
    position: fixed;
    bottom: 5px;
    width: 100%;
    //  height: 100px;
    padding-top: 10px;
    border-top: 1px solid rgb(91, 172, 226);
    color: black;
    transition: 1s;
  }
}
/deep/.el-tag{
   height: 30px;
   font-size: 14px;
   margin-left: 10px;
}

.all{
  margin-left: 20px;
  width:80px;
  text-align:center;
}
/deep/.addNote .el-input__inner::-webkit-input-placeholder{
      color: rgb(182, 161, 233) ;
    }
@media screen and (max-height: 400px){
  .addNote{
    opacity: 0;
    // display: none;
    transition: 1s;
  }
}
</style>